import React from 'react'
import PropTypes from 'prop-types'
import {
  View, StyleSheet, Image
} from 'react-native'
// import CustomImage from '../image/CustomImage'
import { IS_ANDROID, ScaleS } from '../../utils/ScreenUtil'

export default function BlurImg (props) {
  const { style, source, blurAmount, children, onError, onLoadEnd } = props
  return (
    <View style={style}>
      <Image
        source={source}
        onError={onError}
        style={styles.backgroundBlurImage}
        blurRadius={IS_ANDROID ? blurAmount : blurAmount * 2}
        onLoadEnd={onLoadEnd}
      />
      <View style={styles.innerContainer}>
        {children}
      </View>
    </View>
  )
}
BlurImg.defaultProps = {
  blurAmount: 35,
  blurType: 'light'
}
BlurImg.propTypes = {
  source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  blurAmount: PropTypes.number,
  blurType: PropTypes.string,
  children: PropTypes.node,
  onError: PropTypes.func,
  onLoadEnd: PropTypes.func
}
const styles = StyleSheet.create({
  container: {
    position: 'relative'
  },
  imgView: {
    width: '100%',
    height: '100%',
    overflow: 'hidden'
  },
  backgroundBlurImage: {
    resizeMode: 'cover',
    width: '100%',
    height: '100%'
  },
  blurView: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  innerContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
})
